<template>
    <div id="nav-container">
        <div id="nav-center">
            <slot name="center">
                <div style="font-size: 16rem;">{{ title }}</div>
            </slot>
        </div>
        <div id="nav-left">
            <slot name="left">
                <img style="width: 20rem; height: 20rem;padding: 8rem;" :src="isBackIcon ? backUrl : closeUrl" @click="emit('back')">
            </slot>
        </div>
        <div id="nav-right"><slot name="right"></slot></div>
    </div>
</template>

<script>
export default {
  name: 'NavigationBar',
}
</script>

<script setup>
import { computed, ref } from 'vue'
import backUrl from '@/assets/ic_back_black.png'
import closeUrl from '@/assets/ic_close_black.png'

const emit = defineEmits(['back'])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  isBackIcon: {
    type: Boolean,
    default: false
  }
})

const titleTxt = computed(() => {
    return props.title
})



</script>

<style lang="scss" scoped>
#nav-container {
    position: relative;
    z-index: 10;
}
#nav-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
#nav-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}
#nav-center {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>

<style lang="scss">
</style>